<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'fangsong';
                font-weight: bold;
            }
            .container {
                position: absolute;
                top: 30px;
                left: 30px;
                width: 250px;
                height: 95px;
                background-image: linear-gradient(135deg, white, rgb(184, 184, 184));
                box-shadow: inset 3px 3px 6px rgb(155, 155, 155);
                user-select: none;
            }
            .item {
                padding: 5px;
                width: 100%;
                height: 30px;
            }
            #canvas {
                position: fixed;
                top: 0;
                left: 0;
                z-index: -1000;
                overflow: auto;
                box-shadow: inset 0 0 5px 5px skyblue;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">颜色选择：<input type="color" value="#1E90FF" id="colour" /></div>
            <div class="item">画笔粗细： <input type="range" value="3" min="1" max="66" id="thickness" /></div>
            <div class="item">
                <button id="empty">清空绘画板</button>
            </div>
            <div class="item"></div>
            <canvas id="canvas">对不起，您的浏览器不支持canvas</canvas>
        </div>

        <script>
            window.addEventListener('load', () => {
                // 颜色选择
                var colour = document.querySelector('#colour');
                // 粗细选择
                var thickness = document.querySelector('#thickness');
                // 清空画布按钮
                var empty = document.querySelector('#empty');
                // 获取canvas画布
                var canvas = document.querySelector('#canvas');
                var draw = canvas.getContext('2d');

                // 初始化基本变量
                //画笔当前的颜色
                var newColor = colour.value;
                // 画笔当前的粗细
                var newRange = thickness.value;
                //canvas画布的宽高
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                // 改变颜色与画笔粗细事件
                colour.addEventListener('change', () => {
                    newColor = colour.value;
                    // 确定是否改变颜色
                    alert('确定改变颜色？');
                    temp = 0;
                });
                thickness.addEventListener('change', () => {
                    newRange = thickness.value;
                });

                // 实现画画功能
                // 变量，记录鼠标状态
                let temp = 0;
                //鼠标点下事件
                canvas.addEventListener('mousedown', (e) => {
                    // temp =1
                    temp = 1;
                    // 获取鼠标位置
                    const x = e.clientX;
                    const y = e.clientY;
                    // 线条颜色
                    draw.strokeStyle = newColor;
                    //线条宽度
                    draw.lineWidth = newRange;
                    // 绘制圆形的结束线帽
                    draw.lineCap = 'round';
                    // 开始绘制
                    draw.beginPath();
                    draw.moveTo(x, y);
                });
                // 鼠标移动事件
                canvas.addEventListener('mousemove', (e) => {
                    // 只有temp==1才触发，就是鼠标点下时
                    if (temp == 1) {
                        // 获取实时位置
                        const x = e.pageX;
                        const y = e.pageY;
                        // 连线
                        draw.lineTo(x, y);
                        // 绘制路径
                        draw.stroke();
                    }
                });
                // 松开鼠标事件，temp=0
                canvas.addEventListener('mouseup', () => {
                    temp = 0;
                });

                // 清空画板
                empty.addEventListener('click', () => {
                    draw.clearRect(0, 0, canvas.width, canvas.height);
                });
            });
        </script>
    </body>
</html>
